<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="../../../bower_components/vue/dist/vue.min.js"></script>

    <!--
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <script src="../../../bower_components/vue/dist/vue.min.js"></script>
    -->
</head>

<body>
    <div id="app">
        {{msg}}
        <localcomponent></localcomponent>
    </div>

    <script>
        //vue实例
        new Vue({
            el: "#app",
            data: {
                msg: "message",
            },
            //局部组件，直接写components里面
            components: {
                'localcomponent': {
                    //组件里面放数据，data必须是函数的形式，函数必须返回一个对象(json)
                    data() {
                        return {
                            msg: '我是json对象'
                        }
                    },
                    methods: {
                        change: function () {
                            alert("hello");
                        }
                    },
                    template: '<h3>我是组件模板，{{msg}}</h3>',
                },
            },
        });
    </script>
</body>

</html>